<template>
  <view class="container">
    <view class="nav-bar">
      <view class="tabs">
        <view 
          v-for="tab in tabs" 
          :key="tab"
          :class="['tab', { 'active': currentTab === tab }]"
          @click="switchTab(tab)"
        >
          {{ tab }}
        </view>
      </view>
    </view>

   <view class="content-wrapper">
     <!-- 加载状态 -->
     <view v-if="loading" class="loading"></view>
   
     <!-- 动态组件 -->
     <AllOrders 
       v-if="currentTab === '全部' && !loading"
       :orders="allOrders"
     /> 
     
     <PendingPayment 
       v-if="currentTab === '待支付' && !loading"
       :orders="pendingPaymentOrders"
     />
     
     <PendingDelivery 
       v-if="currentTab === '待配送' && !loading"
       :orders="pendingDeliveryOrders"
     /> 
     
     <PendingReceipt 
       v-if="currentTab === '待收货' && !loading"
       :orders="pendingReceiptOrders"
     /> 
   
     <view class="no-more">
       <text>{{ noMoreText }}</text>
     </view>
   </view>
  </view>
</template>

<script setup>
import { ref, reactive, watchEffect,computed  } from 'vue'
import store from '../../store/index.js';
import { onLoad } from '@dcloudio/uni-app'
// 引入子组件
import AllOrders from '/pages/orderComponent/AllOrders.vue'
import PendingPayment from '/pages/orderComponent/PendingPayment.vue'
import PendingDelivery from '/pages/orderComponent/PendingDelivery.vue'
import PendingReceipt from '/pages/orderComponent/PendingReceipt.vue'

const tabs = ['全部', '待支付', '待配送', '待收货']
const currentTab = ref('全部')
const loading = ref(false)
const userId = store.state.user.userId
// 数据存储结构
const allOrders = ref([])
const datas = ref({})

// 根据当前标签获取API路径
// const getApiPath = () => {
//   const map = {
//     '全部': '/sale/listOrderALLWX',
//     // '待支付': 'pendingPayment',
//     // '待配送': 'pendingDelivery',
//     // '待收货': 'pendingReceipt'
//   }
//   return  `http://127.0.0.1:15000/SALE-SERVICE${map[currentTab.value]}`
// }


onLoad((options) => {
  if (options.targetTab) {
    // 解码参数
    const decodedTab = decodeURIComponent(options.targetTab);
    if (tabs.includes(decodedTab)) {
      currentTab.value = decodedTab; 
    }
  }
})


// 数据请求方法
const fetchData = async () => {
  try { 
    loading.value = true
    
    const res = await uni.request({
      url: 'http://127.0.0.1:15000/SALE-SERVICE/sale/listOrderALLWX',
      method: 'GET',
      data: { id : userId }
    })
    
    if (res.data.data.code === 200) {
      allOrders.value = res.data.data
    }
    
  } catch (error) { 
    uni.showToast({ title: '数据加载失败', icon: 'none' })
    console.error('请求错误:', error)
    
  } finally { 
    loading.value = false
  }
}

// 从所有订单中筛选不同状态
const pendingPaymentOrders = computed(() => {
  return allOrders.value.data?.filter(order => order.paymentStatus == 1) || []
})

const pendingDeliveryOrders = computed(() => {
  return allOrders.value.data?.filter(order => order.paymentStatus == 2) || []
})

const pendingReceiptOrders = computed(() => {
  return allOrders.value.data?.filter(order => order.paymentStatus == 4) || []
})



// 监听标签变化自动请求
watchEffect(() => {
  if (currentTab.value) {
    fetchData()
  }
})

// 切换标签处理函数
const switchTab = (tab) => {
  if (currentTab.value !== tab) {
    currentTab.value = tab
    // 可以在这里添加取消上次请求的逻辑
  }
}

// 计算属性
const noMoreText = computed(() => {
  return loading.value ? '正在加载...' : '没有更多内容了'
})
</script>

<style lang="scss">
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.nav-bar {
 position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background: #fff;
   padding: 10rpx 20rpx;
   z-index: 999;
  
 

  .tabs {
    display: flex;
    margin-top: 5px;
    
    .tab {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;
      font-size: 32rpx;
      color: #666;
      
      &.active {
		width: 50%;
        color: #e53b03;
        font-weight: bold;
        border-bottom: 4rpx solid #e53b03;
      }
    }
  }
}

.content-wrapper {
  margin-top: 120rpx; /* 根据导航栏实际高度调整 */
  padding: 0 20rpx;
}

.no-more {
  text-align: center;
  color: #999;
  padding: 40rpx 0;
  font-size: 28rpx;
}
</style>